<template>
    <div>
        <ul class="coupon-list">
            <!-- 优惠券列表项 -->
            <li class="coupon-list-item" v-for="item in couponList">
                <!-- 左侧优惠券价格区域 -->
                <div class="coupon-item-left">
                    <p class="coupon-item-price"><span>¥</span>{{item.couponPrice}}</p>
                    <p class="coupon-item-desc">满{{item.conditionPrice}}元可用</p>
                </div>
                <!-- 右侧优惠券描述信息区域 -->
                <div class="coupon-item-right">
                    <p class="coupon-item-title" v-text="item.title"></p>
                    <p class="coupon-item-date">截止日期{{item.exipreDate}}</p>
                    <button class="coupon-item-btn" v-if="tabIndex === 0" @click="useCoupon">立即使用</button>
                    <button class="coupon-item-btn" v-else-if="tabIndex === 1">已使用</button>
                    <button class="coupon-item-btn" v-else-if="tabIndex === 2">已过期</button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            tabIndex: {type: Number, default: 2},               // 优惠券tab索引
            couponList: {type: Array, default: () => []}        // 优惠券列表数据
        },
        name: "couponTabItem",
        methods: {
            useCoupon() {
                this.$router.push('/home').catch(err => {});
            }
        }
    }
</script>

<style lang="less" scoped>
    /* 优惠券列表区域 */
    .coupon-list {
        padding: 20px 44px 20px 48px;
        /* 优惠券列表项 */
        .coupon-list-item {
            width: 100%;
            height: 206px;
            margin-bottom: 20px;
            display: flex;
            /* 左侧优惠券价格区域 */
            .coupon-item-left {
                width: 255px;
                height: 100%;
                text-align: center;
                background: url("/static/images/coupon/coupon-price-bg.png") no-repeat 0 0;
                background-size: contain;
                /* 优惠券价格 */
                .coupon-item-price {
                    margin-top: 10px;
                    font-size: 90px;
                    font-weight: bold;
                    color: #FFFFFF;
                    span {
                        font-size: 30px;
                        margin-right: 10px;
                    }
                }
                /* 优惠券使用条件描述 */
                .coupon-item-desc {
                    font-size: 30px;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }
            /* 右侧优惠券描述信息区域 */
            .coupon-item-right {
                width: 403px;
                height: 100%;
                background: url("/static/images/coupon/coupon-desc-bg.png") no-repeat 0 0;
                background-size: contain;
                text-align: center;
                /* 优惠券名称 */
                .coupon-item-title {
                    font-size: 28px;
                    font-weight: 400;
                    color: #040404;
                    opacity: 0.9;
                    margin-top: 17px;
                }
                /* 优惠券截止日期 */
                .coupon-item-date {
                    font-size: 24px;
                    font-weight: bold;
                    color: #040404;
                    opacity: 0.5;
                    margin-top: 18px;
                }
                /* 立即使用按钮 */
                .coupon-item-btn {
                    width: 137px;
                    height: 42px;
                    border: 2px solid #E32121;
                    border-radius: 20px;
                    font-size: 24px;
                    font-weight: bold;
                    color: #E32121;
                    background-color: #fff;
                    margin-top: 20px;
                }
            }
        }
    }
</style>
